<template>
  <div class="fhx-search-form">
    <el-form
      ref="searchForm"
      v-model="searchFormData"
      label-position="left"
      label-width="85px"
      content-width="210px"
      :inline="true">
    <el-form-item
      v-for="(item, i) in formTitle"
      :key="i"
      :label="item.label"
      :prop="item.prop"
      >
      <h-tree-select
        v-if="item.type === 'treeSelect'"
        ref="treeSelect"
        v-model="item.data"
        :tree-data="treeData"
        :props="props"
        node-key="indexCode"
        parent-key="parentIndexCode"
        placeholder="不限"
        :expand-on-click-node="true"
        :show-search="false"
        @node-click="nodeClick"
      ></h-tree-select>
      <el-input v-if="item.type === 'input'" v-model.trim="item.data" :placeholder="item.placeholder" :maxlength="64"></el-input>
      <el-date-picker v-if="item.type === 'date' || item.type === 'datetimerange' || item.type === 'daterange'"
        v-model="item.data" :type="item.type"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="请选择时间"
        format="yyyy/MM/dd"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-select v-if="item.type === 'select' " v-model="item.data" :placeholder="item.placeholder">
        <el-option class="all" label="不限" value="" placeholder="不限"/>
        <el-option v-for="(option, i) in item.options" :key="'select' + i" :label="option.label" :value="option.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="btn-group demo-form-btns">
      <el-button type="primary" :loading="searchLoading" @click="onSearch">查询</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { formatDate } from '@/util/utils'
export default {
  name: '',
  props: {
    formTitle: {
      type: Array,
      default: () => []
    },
    searchLoading: {
      type: Boolean,
      default: false
    },
    treeData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      searchFormData: {},
      // 树结构默认子节点
      props: {
        children: 'subRegion',
        label: 'name'
      },
      selectNode: ''
    }
  },
  mounted () {},
  methods: {
    nodeClick (node) {
      this.selectNode = node.externalIndexCode
      console.log(node)
    },
    // 查询
    onSearch () {
      this.formTitle.forEach(item => {
        if (item.prop === 'statisticDate' && !item.data) {
          this.$set(this.searchFormData, item.prop, [formatDate(new Date(), 'yyyy-MM-dd'), formatDate(new Date(), 'yyyy-MM-dd')])
          this.$set(this.formTitle[1], 'data', [formatDate(new Date(), 'yyyy-MM-dd'), formatDate(new Date(), 'yyyy-MM-dd')])
          //  this.$set(this.formTitle[0], 'data', formatDate(new Date(), 'yyyy-MM-dd'))
        } else if (item.prop === 'departmentId') { // 当为区域时，需要赋值节点的externalIndexCode
          this.$set(this.searchFormData, item.prop, this.selectNode)
        } else {
          this.$set(this.searchFormData, item.prop, item.data)
        }
      })
      console.log('this.searchFormData', this.searchFormData)
      this.$emit('onSearchEmit', this.searchFormData)
    },
    // 重置
    resetForm () {
      this.formTitle.forEach(item => {
        this.$set(item, 'data', '')
        if (item.prop === 'statisticDate') {
          this.$set(this.searchFormData, item.prop, [formatDate(new Date(), 'yyyy-MM-dd'), formatDate(new Date(), 'yyyy-MM-dd')])
          this.$set(this.formTitle[1], 'data', [formatDate(new Date(), 'yyyy/MM/dd'), formatDate(new Date(), 'yyyy/MM/dd')])
          // console.log(this.formTitle)
        } else {
          this.$set(this.searchFormData, item.prop, '')
        }
        // console.log(this.searchFormData)
      })
      this.$emit('resetForm', this.searchFormData)
    }
  }
}
</script>
<style lang="scss">
.fhx-search-form{
  .btn-group{
    padding: 0px 0 0;
    float: right;
    width: 180px;
  }
  .h-tree-select span.placeholder{
    color: #4d4d4d;
  }
}
</style>
